<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>
  <!--    引入css 样式-->
  <link rel="stylesheet"  href="/layui/css/layui.css">
  <!--    引入js -->
  <script src="/layui/layui.js"></script>
</head>
<body>
<div>

  <div class="layui-form-item">
    <label class="layui-form-label">课程名称：</label>
    <div class="layui-input-inline">
      <input type="text" name="name" required lay-verify="required" placeholder="请输入课程名称" autocomplete="off" class="layui-input">
    </div>
    <div><button class="layui-btn" onclick="loadData()">搜索</button></div>
  </div>
  <div>
    <table id="demo" lay-filter="test"></table>

<!--    头部工具栏-->
    <script type="text/html" id="toolbarDemo">
      <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">&#xe654;</i></button>
        <button class="layui-btn layui-btn-sm" lay-event="delete"><i class="layui-icon">&#xe640;</i></button>
      </div>
    </script>

<!--    行操作 工具-->
    <script type="text/html" id="toolEventDemo">
      <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
      <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
  </div>

</div>

<script>
  var table;
  layui.use('table', function(){
    table = layui.table,
            $=layui.$;

    //完成列表的初始化
    table.render({
      elem: '#demo'
      ,id: 'idTest'
      ,url: '/api/food/page.do' //数据接口
      ,page: true //开启分页
      ,toolbar: '#toolbarDemo'
      ,cols: [[ //表头 需要改  跟你的数据接口返回的一样
        {type: 'checkbox', fixed: 'left'}
        ,{field: 'id', title: 'ID', sort: true, fixed: 'left'}
        ,{field: 'name', title: '用户姓名'}
        ,{field: 'fname', title: '食物名称'}
        ,{field: 'price', title: '价格',sort :true,templet: function(d){
              //超过60 字体红色显示
              if(d.price>=60){
                return "<span style='color: red'>"+d.price+"元</span>";
              }else {
                return d.price+"元";
              }

          }}
        ,{field: 'info', title: '食物描述'}
        ,{field: 'ctime', title: '创建时间'}
        ,{title: '操作', width: 200, templet: '#toolEventDemo'}
      ]]
    });

    //列表工具类的触发事件
    table.on('toolbar(test)', function(obj){
      var checkStatus = table.checkStatus(obj.config.id);
      switch(obj.event){
        case 'add':
          location.href="add.html";
          break;
        case 'delete':
          layer.msg('批量删除');
          break;
      };
    });

    //单元格工具事件
    table.on('tool(test)', function(obj){ // 注：test 是 table 原始标签的属性 lay-filter="对应的值"
      var data = obj.data; //获得当前行数据
      var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）

      //删除 当前行 1条
      if(layEvent === 'del'){
        layer.confirm('确定删除吗？', function(index){
          //请求后端接口  Ajax
          $.post("/api/food/del.do","id="+data.id,function (res){
            if(res.code==0){
              obj.del(); // 删除对应行（tr）的 DOM 结构，并更新缓存
            }else {
              layer.msg(obj.data);
            }
            layer.close(index);
          })
        });
      }
      else if(layEvent === 'edit'){ //修改当前行的数据
        //把当前行对应的数据 存储到本地  localStorage.setItem 把对象转换为json,因为只能存储字符串
        localStorage.setItem("food",JSON.stringify(data));
        location.href="update.html";
      }
    });
  });
  //实现列表数据的重载
  function loadData(){
    // 重载 - 这里以搜索为例
    table.reload('idTest', {});
  }
</script>
</body>
</html>